<template>
  <view class="row-item" @click="emit('onNavigator')">
    <view class="left">
      <uni-icons :type="icon" size="20" color="var(--uni-text-1)"></uni-icons>
      <text class="text">{{ label }}</text>
    </view>
    <view class="right">
      <text class="text">{{ num ?? '' }}</text>
      <uni-icons type="right" size="15" color="#aaa"></uni-icons>
    </view>
    <!-- #ifndef H5 -->
    <button class="contact" open-type="contact" v-if="isContact"></button>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <button class="contact" @click="contact" v-if="isContact"></button>
    <!-- #endif -->
  </view>
</template>

<script lang="ts" setup>
  interface Props {
    label : string;
    icon : string;
    num ?: number;
    isContact ?: boolean;
  }
  defineProps<Props>();
  const emit = defineEmits<{
    (e : 'onNavigator') : void
  }>();
  const contact = () => {
    uni.makePhoneCall({
      phoneNumber: '12345678901'
    });
  };
</script>

<style lang="scss" scoped>
  .row-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    height: 100rpx;
    border-bottom: 1px solid #eee;
    background-color: #fff;

    .left {
      display: flex;
      align-items: center;

      .text {
        padding-left: 20rpx;
        color: #666;
      }
    }

    .right {
      display: flex;
      align-items: center;

      .text {
        font-size: 28rpx;
        padding-right: 5rpx;
        color: #aaa;
      }
    }

    .contact {
      position: absolute;
      width: 100%;
      height: 100rpx;
      top: 0;
      left: 0;
      opacity: 0;
    }
  }
</style>